<div class="step email-step panel panel-default">
    <div class="panel-heading">
        <step-heading></step-heading>
    </div>
    <div class="panel-body" ng-hide='step.iface.isCollapsed'>
        <div class='row form-group'>
            <div lookup-context class='col-md-12'>
                <div class="form-group">
                    <label class="help-tooltip" tooltip="{{'emailStepEmailLabelPopover' | translate}}" tooltip-popup-delay="1000" tooltip-trigger="mouseenter">{{'emailStepEmailLabel' | translate}}</label>
                    <textarea ng-model='step.text' lookup-target class="form-control"></textarea>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <div lookup-context class='col-md-12'>
                <form name="formSubject" novalidate>
                    <div>
                        <label>{{'emailSubjectEmailLabel' | translate}}</label>
                        <input ng-model='step.subject' lookup-target auto-clear  type='text' name='subject' class="form-control" required ></input>
                    </div>
                    <div ng-show="formSubject.subject.$invalid" class="validation-error pull-left">{{'sayEmailSubjectValidationError' | translate}}</div>
                </form>
            </div>
        </div>
        <div class="form-group row">
            <div class='col-md-6'>
                <form name="formTo" novalidate>
                    <div lookup-context class="input-group input-group-sm">
                        <span class="input-group-addon">{{'emailStepToLabel' | translate}}</span>
                        <input type='text' name='to' ng-model='step.to' lookup-target auto-clear class="form-control" required></input>
                    </div>
                    <div ng-show="formTo.to.$invalid" class="validation-error pull-left">{{'sayEmailValidationError' | translate}}</div>
                </form>
            </div>
            <div class='col-md-6'>
                <form name="formFrom" novalidate>
                    <div lookup-context class="input-group input-group-sm">
                        <span class="input-group-addon">{{'emailStepFromLabel' | translate}}</span>
                        <input type='text' name='from'  ng-model='step.from' lookup-target auto-clear class="form-control" required></input>
                    </div>
                    <div ng-show="formFrom.from.$invalid" class="validation-error">{{'sayEmailValidationError' | translate}}</div>
                </form>
            </div>
        </div>
        <div class="form-group row">
           <div class='col-md-6'>
               <form name="formCc" novalidate>
                   <div lookup-context class="input-group input-group-sm">
                       <span class="input-group-addon help-tooltip" tooltip="{{'emailStepBccLabelPopover' | translate}}" tooltip-popup-delay="1000" tooltip-trigger="mouseenter">{{'emailStepCcLabel' | translate}}</i></span>
                       <input type='text' name='cc' ng-model='step.cc' lookup-target auto-clear class="form-control" ></input>
                    </div>
               </form>
          </div>
            <div class='col-md-6'>
              <form name="formBcc" novalidate>
                    <div lookup-context class="input-group input-group-sm">
                        <span class="input-group-addon help-tooltip" tooltip="{{'emailStepCcLabelPopover' | translate}}" tooltip-popup-delay="1000" tooltip-trigger="mouseenter">{{'emailStepBccLabel' | translate}}</span>
                        <input type='text' name='bcc'  ng-model='step.bcc' lookup-target auto-clear class="form-control" ></input>
                   </div>
              </form>
            </div>
        </div>
    </div>
</div>